<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生详情</title>
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="./css/student_particulars.css">
    <link rel="stylesheet" href="../student/css/head.css">
</head>

<body>
    <div id="container">
        <div id="vue-root">
            <div class="contain">
                <div class="header">
                    <div class="header_title">学生管理</div>
                    <img src="../image/return.png" alt="" class="return" onclick="history.back()">
                </div>
            </div>
            <div class="particulars p-top">
                <div class="particulars_item">
                    <div class="userhref_box">
                        <div class="head-portrait">
                            <img v-if="student.avatar" :src="getImg(student.avatar)" alt="">
                            <img v-else :src="getImg(student.avatar)" alt="">
                        </div>
                        <div class="clearfix">
                            <a :href="'/wechat/school_courses.html?id='+student.id">
                                <div class="attendance-record">
                                    <img src="../image/handUP.png" alt="">
                                    查看课销记录
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="student-msg">
                        <div class="input-msg">
                            <div class="form_title_item">
                                <div class="form_title">学生姓名</div>
                                <input placeholder="姓名" v-model="student.name">
                            </div>
                            <div class="form_title_item">
                                <div class="form_title">学生性别</div>
                                <select v-model="student.sex">
                                    <option :value="true">男</option>
                                    <option :value="false">女</option>
                                </select>
                            </div>
                            <div class="form_title_item">
                                <div class="form_title">绑定码</div>
                                <input placeholder="绑定码" v-model="student.bindCode">
                            </div>
                            <div class="form_title_item">
                                <div class="form_title">学生联系方式</div>
                                <input placeholder="手机号" v-model="student.phone">
                            </div>
                            <div class="form_title_item">
                                <div class="form_title">学生家庭住址</div>
                                <input placeholder="家庭住址" v-model="student.address">
                            </div>
                        </div>
                    </div>
                    <div class="mask_item_content">
                        <div class="mask_item_content_th">
                            <span class="mask_item_content_th_tr borderRight">已报名班级</span>
                            <span class="mask_item_content_th_tr borderRight">已报名课程</span>
                            <span class="mask_item_content_th_tr">剩余课程课时</span>
                        </div>
                        <div class="mask_item_content_tb" v-for="item in kechengList" :key="item.a1">
                            <span class="mask_item_content_tb_tr borderRight">{{item.className}}</span>
                            <span class="mask_item_content_tb_tr borderRight">{{item.courseName}}</span>
                            <span class="mask_item_content_tb_tr">{{item.num}}</span>
                        </div>
                    </div>
                    <button class="submit" @click="save">保存</button>
                </div>
            </div>
            <transition name="fade">
                <div class="pop-up" v-if="popShow" @click="popClose">
                    <div class="pop-content" @click.stop>
                        <div class="uploadPic" @click="updateImg(popCard)">
                            <img :src="getImg2(popCard.avatar)" alt="">
                        </div>
                        <p>绑定信息填写</p>
                        <div class="pop-input">
                            <span>卡号</span>
                            <input placeholder="请输入卡号" v-model="popCard.no">
                        </div>
                        <div class="pop-input">
                            <span>关系</span>

                            <select v-model="popCard.status">
                                <option v-for="item in relations" :key="item" :value="item">
                                    {{statuss[item]}}</option>
                            </select>
                        </div>
                        <button class="pop-submit" @click="submit">提交</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>

    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/vue.global.prod.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>

    <script src="/js/common.js"></script>
    <script src="/wechat/js/wx.js"></script>

    <script>
        Vue.createApp({
            data: function () {
                return {
                    statuss: ['本人', '老师', '父亲', '母亲', '家长', '爷爷', '奶奶', '外公', '外婆'],
                    student: {},
                    popShow: false,
                    cards: [],
                    popCard: {},
                    kechengList: []
                };
            },
            created: function () {
                const studentId = params().id;
                axios.get('/t/student/' + studentId).then(function (res) {
                    this.student = res.data;
                    this.student0 = copy(this.student);
                }.bind(this));
                this.getData(studentId);
                this.getCourses(studentId);
            },
            methods: {
                getData: function (studentId) {
                    axios.get('/t/cards/' + studentId).then(function (res) {
                        this.cards = res.data;
                    }.bind(this));
                },
                getCourses: function (studentId) {
                    axios.get('/t/student/course/' + studentId).then(function (res) {
                        this.kechengList = res.data;
                    }.bind(this));
                },
                save: function () {
                    axios.put('/t/student', compare(this.student, this.student0)).then(function (res) {
                        alert('成功');
                        this.student0 = copy(this.student);
                    }.bind(this));
                },
                popClose: function () {
                    this.popShow = false;
                    this.popCard = {};
                },
                getImg: function (pic) {
                    if (!pic) return '../image/img/user.jpg';
                    return '/static/' + this.student.schoolId + '/student/' + pic;
                },
                getImg1: function (pic) {
                    if (!pic) return '../image/img/user.jpg';
                    return '/static/' + this.student.schoolId + '/card/' + pic;
                },
                getImg2: function (pic) {
                    if (!pic) return '../image/uploadPic.png';
                    return '/static/' + this.student.schoolId + '/card/' + pic;
                },
                updateImg: function (item) {
                    wxChooseImg(1, 'card', function (pic) {
                        if (item.id)
                            axios.put('/t/card/avatar/' + item.id,
                                toFormParams({ avatar: pic })).then(function (res) {
                                    item.avatar = pic;
                                });
                        else item.avatar = pic;
                    }.bind(this));
                },
                submit: function () {
                    if (!this.popCard.no) {
                        alert('请填写卡号');
                        return;
                    }
                    axios.post('/t/card/bind/' + this.student.id, this.popCard).then(function (res) {
                        this.popClose();
                        this.getData(this.student.id);
                    }.bind(this));
                }
            },
            computed: {
                relations: function () {
                    var o = {};
                    this.cards.forEach(function (it) {
                        o[it.status] = true;
                    });
                    var list = [];
                    for (var i = 0; i < 9; i++) {
                        if (i == 1 || i in o) continue;
                        list.push(i);
                    }
                    return list;
                }
            },
        }).mount('#vue-root');
    </script>
</body>

</html>
